import React, { useEffect, useState } from 'react'
import { Badge, TabBar } from 'antd-mobile'
import { footList } from './MyFoot';
import { useLocation, useNavigate } from 'react-router-dom';
import { useSelector } from 'react-redux';

const AntFoot = () => {
    const location = useLocation()
    const [activeKey, setActiveKey] = useState<any>(location.pathname)
    const cartList = useSelector((state: any) => state.data.cartList)
    const router = useNavigate()
    const changeActive = (value: string) => {
        setActiveKey(value)
        router(value)
    }

    useEffect(() => {

    }, [])
    return (
        <div style={{ position: 'fixed', left: 0, bottom: 0, width: '100%', borderTop: '1px solid #ddd' }}>
            <TabBar safeArea activeKey={activeKey} onChange={changeActive} >
                {footList.map(item => (
                    <TabBar.Item key={item.path} icon={item.icon} title={item.name} badge={item.hot ? cartList.length : null} />
                ))}
            </TabBar>
        </div>
    )
}

export default AntFoot